<template>
	<view class="plate" :style="{ '--color': color }">
		<titleBox title="立即领取"></titleBox>
		<view class="Drawdown" @click="useCardItem">立即领取</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import titleBox from '@/subCard/components/titleBox.vue'
	export default {
		props: ['use_code'],
		components: {
			titleBox
		},
		data() {
			return {}
		},
		methods: {

			useCardItem() {
				this.$showLoading('');
				this.$http.post({
					url: '/TimeCardApi/useCardItem',
					data: {
						use_code: this.use_code
					}
				}).then(res => {
					this.$hideLoading();
					if (res.code != 200) return this.$Toast(res.msg);
					this.$emit('getDetail')
				})
			}
		},
		computed: {
			...mapState(['color'])
		}
	}
</script>

<style lang="scss" scoped>
	.plate {
		width: 690rpx;
		margin: 0 auto;
		background-color: #ffffff;
		padding: 20rpx;
		border-radius: 10rpx;
		margin-top: 24rpx;
	}

	.Drawdown {
		width: 340rpx;
		height: 76rpx;
		border: 1rpx solid var(--color);
		margin: 50rpx auto 40rpx;
		border-radius: 10rpx;
		color: var(--color);
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
	}
</style>